<template>
<div id="app">
  <h1>信系信息管理</h1>
  <button class="btn1">按钮1</button>
  <button class="btn2">按钮2</button>
  <ul>
    <li @click="handleClick(item)" :class="{active: index === item}" v-for="item in 10" :key="item">{{item}}</li>
  </ul>
</div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      index: 1
    }
  },
  methods: {
    handleClick(item) {
      this.index = item
    }
  }
}
</script>

<style lang="stylus">
  /* 定义变量 */
  $color = red

  /* 定义混合(mixins) */
  btnStyle(w, h, bgColor)
    width w
    height h
    background-color bgColor
    border none

  #app
    h1
      color $color
    .btn1
      btnStyle(100px, 100px, $color)
    .btn2
      btnStyle(200px, 200px, green)
    ul
      li
        line-height 40px
        cursor pointer
        &.active
          font-size 50px
</style>
